<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇游戏</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="game-wrapper">
        <div class="game-header">
            <h1>贪吃蛇游戏</h1>
            <div class="game-info">
                <div class="score-board">
                    <span id="score">分数: 0</span>
                    <span id="highScore">最高分: 0</span>
                </div>
                <div class="game-stats">
                    <span id="length">长度: 1</span>
                    <span id="time">时间: 0s</span>
                </div>
                <div id="aiScore" class="ai-score">AI分数: 0</div>
                <div id="aiLength" class="ai-length">AI长度: 1</div>
            </div>
            <div id="effects" class="effects-container"></div>
        </div>

        <div class="game-container">
            <canvas id="gameCanvas" width="800" height="600"></canvas>
            
            <div class="game-controls">
                <div class="control-group">
                    <label for="speedControl">速度:</label>
                    <input type="range" id="speedControl" min="1" max="10" value="5">
                    <span id="speedValue">5</span>
                </div>
                
                <div class="control-group">
                    <label for="difficultySelect">难度:</label>
                    <select id="difficultySelect" class="difficulty-select">
                        <option value="easy">简单</option>
                        <option value="medium" selected>中等</option>
                        <option value="hard">困难</option>
                    </select>
                </div>
                
                <div class="button-group">
                    <button id="startBtn" class="primary-btn">开始游戏</button>
                    <button id="pauseBtn" class="secondary-btn">暂停</button>
                    <button id="restartBtn" class="secondary-btn">重新开始</button>
                    <button id="obstacleModeBtn" class="secondary-btn">障碍模式</button>
                    <button id="aiModeBtn" class="secondary-btn">AI对战</button>
                </div>
            </div>
        </div>

        <div class="game-footer">
            <div class="game-instructions">
                <h2>游戏说明</h2>
                <div class="instructions-content">
                    <div class="control-instructions">
                        <h3>控制方式</h3>
                        <ul>
                            <li>↑ 向上移动</li>
                            <li>↓ 向下移动</li>
                            <li>← 向左移动</li>
                            <li>→ 向右移动</li>
                            <li>空格键 暂停/继续</li>
                        </ul>
                    </div>
                    <div class="game-rules">
                        <h3>游戏规则</h3>
                        <ul>
                            <li>吃到食物可以增加长度和分数</li>
                            <li>撞到墙壁或自身会导致游戏结束</li>
                            <li>速度越快，得分越高</li>
                            <li>障碍模式：游戏区域会出现随机障碍物，增加游戏难度</li>
                            <li>护盾效果可以穿过墙壁、自身和障碍物</li>
                        </ul>
                    </div>
                    <div class="food-types">
                        <h3>特殊食物</h3>
                        <ul>
                            <li><span class="food-icon normal"></span> 普通食物: 10分</li>
                            <li><span class="food-icon speedBoost"></span> 加速食物: 15分, 速度提升</li>
                            <li><span class="food-icon doubleScore"></span> 双倍分数: 20分, 得分翻倍</li>
                            <li><span class="food-icon shield"></span> 护盾食物: 25分, 免疫碰撞</li>
                        </ul>
                    </div>
                    <div class="ai-rules">
                        <h3>AI对战模式</h3>
                        <ul>
                            <li>开启AI对战模式后，将出现一条AI控制的蛇</li>
                            <li>AI蛇会自动寻找最短路径吃到食物</li>
                            <li>与AI蛇相撞会导致游戏结束</li>
                            <li>可以同时开启障碍模式增加难度</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加结算界面 -->
    <div class="game-over-modal" id="gameOverModal">
        <div class="modal-content">
            <div class="particles-container" id="modalParticles"></div>
            <span class="mode-badge" id="modeBadge">标准模式</span>
            <h2 class="modal-title">游戏结束</h2>
            <div class="score-container">
                <div class="score-item player-stats">
                    <span class="score-label">玩家分数</span>
                    <span class="score-value" id="finalScore">0</span>
                </div>
                <div class="score-item player-stats">
                    <span class="score-label">玩家长度</span>
                    <span class="score-value" id="finalLength">0</span>
                </div>
                <div class="score-item ai-stats" id="aiStatsContainer" style="display: none;">
                    <span class="score-label">AI分数</span>
                    <span class="score-value" id="finalAiScore">0</span>
                </div>
                <div class="score-item ai-stats" id="aiLengthContainer" style="display: none;">
                    <span class="score-label">AI长度</span>
                    <span class="score-value" id="finalAiLength">0</span>
                </div>
                <div class="score-item high-score">
                    <span class="score-label">最高分数</span>
                    <span class="score-value" id="finalHighScore">0</span>
                </div>
                <div class="score-item game-time">
                    <span class="score-label">游戏时间</span>
                    <span class="score-value" id="finalTime">0秒</span>
                </div>
            </div>
            <div class="buttons-container">
                <button class="modal-button restart-btn" id="modalRestartBtn">重新开始</button>
                <button class="modal-button menu-btn" id="modalMenuBtn">返回菜单</button>
                <button class="modal-button share-btn" id="modalShareBtn">分享成绩</button>
            </div>
        </div>
    </div>

    <script src="js/game.js"></script>
</body>
</html> 